<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06_超链接练习</title>
</head>
<body>
    <a href="https://www.baidu.com/">百度首页</a>
    <a href="https://www.tmooc.cn/">达内首页</a>
    <a href="01_HTML结构.html">今日的第一个页面</a>
    <a href="05_表格练习.html">今日的第五个页面</a>
    <a href="4.jpg">即将打开一张图片</a>
    <a href="https://www.tmooc.cn/course/304682.shtml">
      <img src="4.jpg" width="300">
    </a>
    <!-- 锚点-->
    <h1>西游记</h1>
    <a href="#c1">快速跳转至第一章</a>
    <a href="#c2">快速跳转至第二章</a>
    <a href="#c3">快速跳转至第三章</a>
    <a href="#c4">快速跳转至第四章</a>
    <hr>
    <h3 id="c1">第一章 我是逆蝶</h3>
    <p> lorem*10 TAB补全
        <span> Lorem  ipsum dolor sit amet, consectetur adipisicing elit. Alias aspernatur eligendi enim fugiat impedit, ipsum iste minima nam, omnis optio quibusdam sunt totam voluptatem. Delectus dicta distinctio magnam quidem totam.</span>
    </p>
    <h3 id="c2">第二章 我是尼玛</h3>
    <p> lorem*10 TAB补全
      <span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aspernatur eligendi enim fugiat impedit, ipsum iste minima nam, omnis optio quibusdam sunt totam voluptatem. Delectus dicta distinctio magnam quidem totam.</span>
    </p>
    <h3 id="c3">第三章 你是我儿</h3>
    <p> lorem*10 TAB补全
      <span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aspernatur eligendi enim fugiat impedit, ipsum iste minima nam, omnis optio quibusdam sunt totam voluptatem. Delectus dicta distinctio magnam quidem totam.</span>
    </p>
    <h3 id="c4">第四章 你是我孙</h3>
    <p> lorem*10 TAB补全
      <span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aspernatur eligendi enim fugiat impedit, ipsum iste minima nam, omnis optio quibusdam sunt totam voluptatem. Delectus dicta distinctio magnam quidem totam.</span>
    </p>
<a href="#">快速跳转直顶部</a>
</body>
</html>